<!--  -->
<template>
  <div >
          <div class="font15 mt10 pl10">
              <span class="titletext ">思政纪实</span>
               <div class="graytext  mt10 font13">
                  <span >填报人：</span>
                  <span class="titletext">{{fromdetal.applyUser}}</span>
               </div>
          </div>
          <div class="font11 mt10 bggray ptandpb10">
          <!-- <div class="graytext pl10">
              <span >填报人：</span>
              <span >{{fromdetal.applyUser}}</span>
          </div> -->
          <div class=" graytext pl10">
              <span >填报组织：</span>
              <span class="titletext">{{fromdetal.applyOrg}}</span>
          </div>
          <div class="mt10 graytext pl10">
            <span >填报时间：</span>
            <span class="titletext">{{fromdetal.applyTime}}</span>
          </div>
          </div>
          <van-form @submit="onSubmit">
          <!-- <van-field 
                autosize
                v-model="fromdetal.applyUser"
                readonly
                label-width="3.5em"
                label="填报人:"
                placeholder="请输入..."
                name="applyUser"
          />
            <van-field 
                v-model="fromdetal.applyOrg"
                readonly
                label-width="4.5em"
                label="填报组织:"
                placeholder="请输入..."
                name="applyOrg"
          />
            <van-field 
                v-model="fromdetal.applyTime"
                readonly
                label-width="4.5em"
                label="填报时间:"
                placeholder="请输入..."
                name="applyTime"
          /> -->
            <van-field 
            required
            readonly
            :right-icon="isdrawType?'arrow':''" 添加右侧图标
            input-align="left" 设置文字位置
            label-width="7.5em"  设置标题长度
            clickable
            name="picker"  
            :value="fromdetal.talkTime"
            label="谈话或走访时间:"
            placeholder="请选择时间"
            @click="showTimePicker = isdrawType?true:false"
          
            :rules="[{ required: true, message: '' }]"
            />
            <van-popup v-model="showTimePicker" position="bottom">
            <van-datetime-picker
                :formatter='formatter'
                v-model="nowDate"
                type="datetime"
                :min-date="minDate"
                :max-date="maxDate"
                @cancel="showTimePicker = false"
                @confirm="showTimePickeronConfirm"
                />
            </van-popup>

            <van-field 
                rows="1"
                autosize
                type="textarea"
                v-model="fromdetal.talkAddress"
                required
                label-width="7.5em"
                :readonly="!isdrawType"
                label="谈话或走访地点:"
                placeholder="请填写谈话或走访地点"
                maxlength="100"
                :show-word-limit="isdrawType"
                :rules="[{ required: true, message: '' }]"
                name="talkAddress"
          />
            <van-field 
                v-model="fromdetal.numberOfPanel"
                required
                :readonly="!isdrawType"
                label-width="4.5em"
                label="座谈人数:"
                type="digit"
                autocomplete="off"
                placeholder="请填写座谈人数"
                :right-icon="isdrawType?'arrow':''" 添加右侧图标
              
                :rules="[{ required: true, message: '' }]"
                 name="numberOfPanel"
          />
            <van-field 
                rows="1"
                autosize
                type="textarea"
                v-model="fromdetal.configDeptName"
                required
                label-width="9.5em"
                :readonly="!isdrawType"
                label="谈话主题或走访事项:"
                placeholder="请填写谈话主题或走访事项"
                maxlength="100"
                :show-word-limit="isdrawType"
                 :rules="[{ required: true, message: '' }]"
                 name="configDeptName"
          />
            <van-field 
                rows="1"
                autosize
                type="textarea"
                v-model="fromdetal.configTime"
                required
                label-width="7.5em"
                :readonly="!isdrawType"
                label="谈话或走访对象:"
                placeholder="请填写谈话或走访对象"
                maxlength="100"
                :show-word-limit="isdrawType"
                 :rules="[{ required: true, message: '' }]"
                  name="configTime"
          />
            <van-field 
                rows="1"
                autosize
                required
                type="textarea"
                v-model="fromdetal.talkContent"
                label-width="9.5em"
                :readonly="!isdrawType"
                label="谈话或走访内容简述:"
                placeholder="请填写谈话或走访内容简述"
                maxlength="1000"
                :show-word-limit="isdrawType"
                :rules="[{ required: true, message: '' }]"
                name="talkContent"
          />
      
        <div class="border-b-1" >
                    <van-field label-width="10em" readonly  name="content"  
                    label="谈话或走访附件:" class="lyy-width" input-align="left" placeholder="" >
                      </van-field>
                        <template >
                            <template v-if="file_is_show">
                                <div v-for="(item,index) in fromdetal.drawFiles" :key="index" class="fileBox">
                                    <div :readonly="!isdrawType" class="font14 fileLink" style="color:#0F85CF">
                                        <!-- <a :href='openFileUrlfun(item.anonymousFilePath)'>{{item.fileName}}</a> -->
                                        <a target="_blank" @click="openFileUrlfun(item.anonymousFilePath)">{{item.fileName}}</a>
                                        <!-- <a :href="item.anonymousFilePath.replace('/sys/file/download',
                                        'https://hfx.net/ha5giservice/hqwx/sys/file/download/anonymous')">{{item.fileName}}</a> -->
                                    </div>
                                    <span class="font12 color-red ml5" v-if='isdrawType' @click="uploadFileDelete(index)">X</span>
                                </div>
                            </template>

                            <form v-if='isdrawType' action="" class="font14 file" style="height:46px;margin-bottom: 50px;text-align:right;padding-right:20px">
                                 <van-uploader v-model="fileList" :after-read="fileUpload"  :preview-image='false'>
                                    <van-button icon="plus" type="primary" color="#60a9ec">上传文件</van-button>
                                </van-uploader>
                            </form>
                        </template>
                  
        </div>
     
         <div v-show="isdrawType" class="footer">
                <van-button  block type="info" native-type="submit">提交</van-button>
         </div>
        </van-form>
  </div>
  
</template>

<script>
import {getszjsDetail,saveszjsDetail,uploadProcessFiles}  from "@/api/gettodo"
import {mapGetters} from "vuex"
import { Notify, Toast } from 'vant'
import moment from 'moment'
import {openFileUrl} from '@/store/openFile'
  export default {
    components: {
       
    },
    data(){
            return{
                isdrawType:true,
                fromdetal:{},
                params:this.$route.params,
                minDate: new Date(new Date().getFullYear()-10,new Date().getMonth(),new Date().getDate()),
                maxDate: new Date(new Date().getFullYear()+10,new Date().getMonth(),new Date().getDate()),
                nowDate: new Date(new Date().getFullYear(),new Date().getMonth(),new Date().getDate()),
                showTimePicker:false,
                file_is_show:true,
                 fileList: []
            }
    },
    computed:{
        ...mapGetters(['user']),
        ...mapGetters(['userinfo'])
    },
    //生命周期--创建完成
    created() {
         this.isdrawType=this.params.isdraw;
         console.log("是否可编辑"+this.isdrawType);
         if (this.isdrawType){
             this.fromdetal.applyUser=this.userinfo.truename;
             this.fromdetal.applyOrg=this.userinfo.authOrgs[0].displayName;
             this.fromdetal.applyTime =moment(new Date()).format('YYYY-MM-DD');
         }else if (this.isdrawType==false&&this.params.szjsdetailid!=undefined
            &&this.params.szjsdetailid.length>0){
              this.getdetail();
         }
    },
    activated() {
       
        
        
    },
    //生命周期--挂载完成
    mounted() {

    },
    //方法调用
    methods: {
        openFileUrlfun(value){
            this.$router.push(
                {
                 name:'fileview',
                 query:{
                     openFileUrl: openFileUrl(value)
                    }
                }
            );
        },
        getdetail(){
            Toast.loading({
                message:'加载中',
                forbidClick:false
            });
            getszjsDetail(Object.assign(this.params,{userName:this.user.userName}))
                .then((result)=>{
                    this.fromdetal={};
                    Toast.clear();
                    if(!result.data){
                        Notify(result.message);
                        return;
                    }
                    if(result.data.data){
                        this.fromdetal=result.data.data;
                        if(!result.data.data.drawFiles){
                            this.fromdetal.drawFiles=[];
                        }
                    }

                })
        },
        showTimePickeronConfirm(value){
            this.fromdetal.talkTime=moment(value).format('YYYY-MM-DD HH:mm:ss');
            this.showTimePicker=false;
        },saveFromData(){
            if(this.fromdetal.talkTime==undefined || this.fromdetal.talkTime.length<=0){
                Notify('请选择谈话或走访时间');
            }
        },onSubmit(values){
            console.log('values'+JSON.stringify(values))
            Toast.loading({
                message: "提交中...",
                forbidClick: true,
            });
            saveszjsDetail(Object.assign({fromdetaildata:this.fromdetal},{userName:this.user.userName}))
             .then((result)=>{
                Toast.clear();
                if(result.data.errcode==0){
                    Notify({type: 'success',message:'提交成功'});
                    this.$router.back()
                }else{
                    Notify(result.message);
                }
             }).catch(()=>{
                Toast.clear();
             })
        },
          formatter(type, val) {
            if (type === 'year') {
              return `${val}年`;
            } else if (type === 'month') {
              return `${val}月`;
            } else if (type === 'day') {
              return `${val}日`;
            } else if (type === 'hour') {
              return `${val}时`;
            } else if (type === 'minute') {
              return `${val}分`;
            }
            return val;
          },
          fileUpload(file,detail){
            
            console.log('111'+JSON.stringify(file))
            let dataurl=file.content;
            let arr = dataurl.split(','),
            mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]),
            n = bstr.length,
            u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            var filename=    this.fileList[0].file.name;
            let fileData = new FormData();
            fileData.append('pmInsType', 'A');
            fileData.append('pmInsTypePart', '1');       
            fileData.append('files', new File([u8arr], filename+"", {
                    type: mime
                }));
            this.fileList=[];
            Toast.loading({
                message: '加载中...',
                forbidClick: true,
            });
            uploadProcessFiles(fileData,Object.assign({userName:this.user.userName}))
            .then(res=>{
                Toast.clear();
                if(!res.data){
                    Notify(res.message);
                    return;
                }
                this.file_is_show=false;
                if(this.fromdetal!=null&&this.fromdetal.drawFiles!=null){
                    let listdetails = this.fromdetal.drawFiles;
                    listdetails= listdetails.concat(res.data.data.sysFiles);
                    this.fromdetal.drawFiles=listdetails;
                    console.log(JSON.stringify(this.fromdetal.drawFiles))
                }else{
                    if(this.fromdetal==null){
                        this.fromdetal={};
                    }
                    this.fromdetal.drawFiles=[];
                    this.fromdetal.drawFiles=res.data.data.sysFiles;
                }
                this.file_is_show=true;
            })
            .catch(err=>{
                 Toast.clear();
                Notify('上传失败');
            })
            // drawFiles
        },uploadFileDelete(index){
            this.file_is_show=false;
            this.fromdetal.drawFiles.splice(index);
            this.file_is_show=true;
        }
    }
  }
</script>
<style  scoped>
/* @import url();*/
.mt50{
    margin-bottom: 500px;
}

</style>